<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<style type="text/css">
.seniorSearch .form-group{
	margin-bottom: 6px !important;
	padding-bottom: 6px !important;
}
.panel-body1{
	padding: 0px 20px 0px 20px;
}
</style>
<t:panel cssClass="panel-flat border-xs border-primary border-top-xlg custom-panel searchPanel seniorSearch" customBody="true" customHead="true">
	<div class="panel-heading">
		<h6 class="panel-title">
			高级搜索
			<a class="heading-elements-toggle">
				<i class="icon-more"></i>
			</a>
		</h6>
		<div class="heading-elements"></div>
	</div>
	<div class="panel-body1">
		<t:hidden path="deleteMark" />
		<div class="form-group" style="display:none" >
			<t:label path="startDate" cssClass="col-sm-1" />
			<t:date path="startDate" rightInputGroupIcon="icon-calendar52 text-primary" colClass="col-sm-2" />
			<t:label path="endDate" cssClass="col-sm-1" />
			<t:date path="endDate" rightInputGroupIcon="icon-calendar52 text-primary" colClass="col-sm-2" />
		</div>
		<t:formgroup>
			<div style="float:left;">
				<label style="margin-left:20px;">开始时间—结束时间: </label>
				<button type="button" class="btn btn-default daterange-ranges" colClass="col-sm-6" style="margin-left:20px;">
					<i class="icon-calendar22 position-right"></i> <span></span> <b class="caret"></b>
				</button>
			</div>
			<t:label path="customerId" cssClass="col-sm-1 col-xs-1" />
		    <t:select2 path="customerId" placeholder="请选择客户" allowClear="true" colClass="col-sm-3 col-xs-3"></t:select2>
		</t:formgroup>
	</div>
</t:panel>
<script src="<c:url value='/js/moment/moment.min.js'/>" type="text/javascript"></script>
<script src="<c:url value='/js/moment/moment_locales.min.js'/>" type="text/javascript"></script>
<script type="text/javascript">

var startDate='';
var endDate='';
$(function(){
	$('.daterange-ranges').daterangepicker(
	        {
	            startDate: moment().subtract(29,'days'),
	            endDate: moment(),
	            minDate: '01/01/2016',
	            maxDate: '12/31/2020',
	            dateLimit: { days: 60 },
	            ranges: {
	                '今天': [moment(), moment()],
	                '昨天': [moment().subtract(1,'days'), moment().subtract(1,'days')],
	                '上周': [moment().subtract(6,'days'), moment()],
	                '最近30天': [moment().subtract(29,'days'), moment()],
	                '本月': [moment().startOf('month'), moment().endOf('month')],
	                '上月': [moment().subtract(1,'month').startOf('month'), moment().subtract(1,'month').endOf('month')]
	 
	            },
	            opens: 'right',
	            applyClass: 'btn-small bg-slate-600',
	            cancelClass: 'btn-small btn-default',
	            format:'YYYY-MM-DD HH',
	            separator:'to',
	            locale:{
	            	 applyLabel : '确定',  
	                 cancelLabel : '取消',  
	                 fromLabel : '起始时间',  
	                 toLabel : '结束时间',  
	                 customRangeLabel : '自定义',  
	                 daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],  
	                 monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',  
	                                '七月', '八月', '九月', '十月', '十一月', '十二月' ],  
	                                firstDay : 1  
	            }
	        },
	        function(start, end) {
	        	startDate=start;
	        	endDate=end;
	            $('.daterange-ranges span').html(start.format('YYYY-MM-DD HH') + ' &nbsp; - &nbsp; ' + end.format('YYYY-MM-DD HH'));
	            
	            if(startDate!=$("#startDate").val()){
	    	    	
	    	    	$("#startDate").val(startDate.format('YYYY-MM-DD'));
	    	    	$("#endDate").val(endDate.format('YYYY-MM-DD'));
	    	    	seniorSearchCallback();
	    	    }
	         
	        }
	    );
	    // Display date format
	    $('.daterange-ranges span').html(moment().subtract(29,'days').format('YYYY-MM-DD') + ' &nbsp; - &nbsp; ' + moment().format('YYYY-MM-DD'));
	    $(".start-date-label").text("开始时间");
	     $(".end-date-label").text("结束时间");
	$("#billingNo").bind('input propertychange', function() {
		initPageIndex();
		formSubmit();
	});
	
	function seniorSearchCallback(id,name,sender){
		initPageIndex();
		formSubmit();
	}
	
	$("#customerId").on("change",function(){
		initPageIndex();
		formSubmit();
	});
});
</script>